<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>编辑店面</title>
    <script type="text/javascript" src="<%=path%>/projectjs/regioninfo.js" ></script>
	<!--引用百度地图API-->
<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/14/bmap.css"/>
	 <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.4&key=&services=&t=20121219104921"></script>
	<style type="text/css">
    	html,body{margin:0;padding:0;}
    	.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    	.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
	</style>
	<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point("${shopVO.lng}","${shopVO.lat}");//定义一个中心点坐标
        map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
        var marker = new BMap.Marker(new BMap.Point("${shopVO.lng}","${shopVO.lat}"));  // 创建标注
		map.addOverlay(marker);              // 将标注添加到地图中
		var infoWindow = new BMap.InfoWindow("这是您之前选择的地址");
		//创建信息窗口
		marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
	//选取坐标
	function showInfo(e){
		if(window.confirm("确定选取此坐标？")){
		document.getElementById("lng").value=e.point.lng ;
		document.getElementById("lat").value=e.point.lat;
		}
	}

    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);

	map.addEventListener("click", showInfo);
    }
       //转换地图中心
	function changeCenter(address){
	var local = new BMap.LocalSearch(map, {  
 	renderOptions:{map: map}  
	});  
		local.search(address);  
 	}
 	
 	//搜索转换地图中心
 	function quickSerchMap(){
 	var address = document.getElementById("mapAddress").value;
 	changeCenter(address);
 	}
 	
 	//省市区转换地图中心
 	function changeCenterBySelect(target){
 	var itemId = target.id;
 	var address = $("#"+itemId+" > option:selected").text();
 	changeCenter(address);
 	}
 	
    
     $(document).ready(function(){
 setTimeout(function(){initMap();},800); 
});//创建和初始化地图
</script>
  </head>
  <body>
	<div class="pageContent">
		<form method="post" action="<%=path %>/shop/saveShop.action" class="pageForm required-validate" onsubmit="return validateCallback(this, dialogAjaxDone);">
			<div class="pageFormContent" layoutH="56">
				<input name="shopVO.id" type="hidden" value="<s:property value="shopVO.id" />" />

				<p>
					<label>店面名称：</label>
					<input name="shopVO.name" value="<s:property value="shopVO.name" />" class="required" type="text" size="30" alt="请输入店面名称"/>
				</p>
				<p>
					<label>店面编码：</label>
					<input name="shopVO.code" value="<s:property value="shopVO.code" />"  type="text" size="30" readonly="readonly" />
				</p>
				<p>
					<label>地址：</label>
					<input name="shopVO.address" value="<s:property value="shopVO.address" />" class="required" type="text" size="30" alt="请输入地址"/>
				</p>
				<p>
					<label>联系人：</label>
					<input name="shopVO.contact" value="<s:property value="shopVO.contact" />"   type="text" size="30" alt="请输入联系人"/>
				</p>
				<p>
					<label>联系电话：</label>
					<input name="shopVO.phone" value="<s:property value="shopVO.phone" />" class="required" type="text" size="30" alt="请输入联系电话"/>
				</p>
				 <div class="divider"></div>
				<p>
					<label>所属省份：</label>
					<input type="hidden" id="shopEdit_db_province_id" value="<s:property value="shopVO.proviceId" />"/>
					<select name="shopVO.proviceId" id="shopEdit_province_id" onchange="getAllCity('shopEdit');changeCenterBySelect(this);" class="required">
						<option value="-1">请选择</option>
              		</select>
				</p>
				<p>
					<label>所属市级：</label>
					<input type="hidden" id="shopEdit_db_city_id" value="<s:property value="shopVO.cityId" />"/>
					<select name="shopVO.cityId" id="shopEdit_city_id" onchange="getAllDistrict('shopEdit');changeCenterBySelect(this);" class="required">
						<option value="-1">请选择</option>
              		</select>
				</p>
				<p>
					<label>所属城区：</label>
					<input type="hidden" id="shopEdit_db_district_id" value="<s:property value="shopVO.districtId" />"/>
					<select name="shopVO.districtId" id="shopEdit_district_id" class="required" onchange="changeCenterBySelect(this);">
						<option value="-1">请选择</option>
              		</select>
				</p>
				<div class="divider"></div>
				<fieldset>
				<legend>坐标</legend>
				<p>
					<label>经度：</label>
					<input name="shopVO.lng" value="<s:property value="shopVO.lng" />" class="required" type="text" size="30" id="lng" />
				</p>
				<p>
					<label>经度：</label>
					<input name="shopVO.lat" value="<s:property value="shopVO.lat" />" class="required" type="text" size="30" id="lat" />
				</p>
				</fieldset>
				<div class="divider"></div>
				 <div style="width:400px;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
				 <dl>
				 <dt></dt>
				 <dd>
				 <input type="text" size="30" alt="输入城市名、街道名快速定位" id="mapAddress"/>
				 <a onclick="quickSerchMap();" class="btnLook"><span>查找</span></a>
				 </dd>
				 </dl>
			</div>
			<div class="formBar">
				<ul>
					<li><div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div></li>
					<li>
						<div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div>
					</li>
				</ul>
			</div>
		</form>
	</div>
  </body>
  <script type="text/javascript"> 
		//getAllProvince("${pageContext.request.contextPath}","shop_province_id","shop_db_province_id","shop_city_id","shop_db_city_id","shop_district_id","shop_db_district_id");
		var shopEdit=new RegionInfo("${pageContext.request.contextPath}","shopEdit_province_id","shopEdit_db_province_id","shopEdit_city_id","shopEdit_db_city_id","shopEdit_district_id","shopEdit_db_district_id","shopEdit");
	</script>
</html>